<template>
  <div>
      <div id="main">
          我是首页
      </div>
      <div>
          <!-- 这里的子组件会被按需加载 -->
          <home-listss></home-listss>
      </div>
  </div>
</template>

<script>
// 引入这个子组件
import homeList from './home-list'
export default {
    // 组件对应的name
    name: 'home',

    // 普通加载子组件的方式
    // components: {
    //     homeList
    // }

    // 我们改写成Vue的异步组件
    components: {
        homeListss: (resolve, reject) => {
            // 我们设置一个定时器来查看组件被加载过程
            setTimeout(() => {
                // resolve(homeList);
                // 这两种写法都可以
                resolve(require('@/components/home-list'));
            },2000)
        }
    }
}
</script>

<!--scoped使样式只在当前组件有效， lang="less"是使用less写样式，需要安装依赖并配置-->
<style scoped lang="less">
    #main {
        .center {
            color: red;
        }
    }
</style>


